<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions"
                xmlns:ds="http://deltaset.org/deltaset-faces"
                xmlns:meta="http://deltaset.org/deltaset-meta"
                xmlns:di="http://java.sun.com/jsf/composite/deltaset.desktop/internal"
                xmlns:p="http://primefaces.org/ui"
                xmlns:composite="http://java.sun.com/jsf/composite">
    <composite:interface>       
        <composite:attribute name="preferencesInclude" type="java.lang.String"/>
        <composite:attribute name="touchIcon" type="java.lang.String"/>       
    </composite:interface>

    <composite:implementation>
        <f:view contentType="text/html"/>
        <h:head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
            <meta name="apple-mobile-web-app-capable"  content="yes" />
            <meta name="apple-mobile-web-app-status-bar-style"  content="default" />
            <meta name="viewport"  content="user-scalable=no" />
            <c:if test="#{not empty cc.attrs.touchIcon}">
                <link rel="apple-touch-icon"  href="#{cc.attrs.touchIcon}" />
            </c:if>

            <title>#{desktopBean.appTitle}</title>  
            <h:outputScript library="javax.faces" name="jsf.js"  target="head"/> 
            <h:outputScript library="deltaset.faces" name="js/deltaset-faces.js" target="head"/>
            <h:outputStylesheet library="deltaset.faces" name="css/detltaset-faces.css"/>
            
            <h:outputScript library="primefaces" name="schedule/schedule.js" target="head"/>
            <h:outputStylesheet library="primefaces" name="schedule/schedule.css"/>
            
            <h:outputScript library="primefaces" name="gmap/gmap.js" target="head"/>
            
            <!-- gmaps -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
            
            

            <script>
                /**
                 *	This ensure the header "page" (view state data) stays in JSF's history
                 */
                var ajaxRequestCount = 0;
                pingHeader = function() {
                    // Ping every 6 Ajax requests...
                    // return;
                    if ((++ajaxRequestCount) > 5) {
                        // Reset counter...
                        ajaxRequestCount = 0;

                        // Get element from header form...
                        var src = document.getElementById('main:west:menu:execButton');
                        var options = {
                            // noop
                            execute: '@this',
                            render: '@this'
                        };
                        jsf.ajax.request(src, null, options);           
                    }
                }
    
                callbackIfSuccess = function(data){
                    deltaset.injectViewData(data);
                    if('complete'==data.status){
                        //alert('data.status is complete');
                        // pingHeader();           
                    }
                }
    
                // initOnLoad = function(){
                //that is for 'ping the header'
                // jsf.ajax.addOnEvent(callbackIfSuccess); 
                //initing the layout manager
                //jQuery(document).ready(function () {
                //jQuery('body').layout({ applyDefaultStyles: true });
                //    jQuery('#container').layout();
                //});
                // }
    
                //document.onload=initOnLoad();
                //jQuery(document).ready(initOnLoad);
            </script>

    <style>
        form{margin:0;padding:0;display:inline;}
    </style>

            <style type="text/css">
                /*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
                */

                body {
                    margin: 0px;
                    padding: 0;
                    font-size: 12px;
                    color: #616161;
                }

                h1, h2, h3 {
                    margin-top: 0;
                }

                h1 {
                    font-size: 1.6em;
                    font-weight: normal;
                }

                h2 {
                    font-size: 1.6em;
                }

                h3 {
                    font-size: 1em;
                    margin-top:20px;
                }

                ul {
                }

                a {
                    text-decoration: none;
                }

                a:hover {
                    text-decoration: underline;
                }

                a img {
                    border: none;
                }

                img.left {
                    float: left;
                    margin: 0 20px 0 0;
                }

                img.right {
                    float: right;
                    margin: 0 0 0 20px;
                }

                /* Header */
                #logo {
                    width: 960px;
                    height: 75px;
                    margin: 0 auto;
                    padding: 25px 10px 0 10px;
                }

                #logo h1, #logo p {
                    float: left;
                    margin: 0;
                }

                #logo h1 {
                    padding: 0 0 0 0;
                    letter-spacing: -1px;
                    font-weight: normal;
                    font-size: 3em;
                }

                #logo p {
                    text-transform: uppercase;
                    padding: 47px 0 0 3px;
                    font-size: 10px;
                    color: #FFFFFF;
                }

                #logo a {
                    border: none;
                    text-decoration: none;
                    color: #DC8700;
                }

                /* Menu */
                #menu {
                    width: 960px;
                    margin: 0 auto;
                    padding: 0;
                    height: 59px;
                }

                #menu ul {
                    margin: 0;
                    padding-left: 270px;
                    list-style: none;
                }

                #menu li {
                    display: inline;
                }

                #menu li a {
                    display: block;
                    float: left;
                    height: 42px;
                    margin: 0;
                    padding: 18px 40px 0 40px;
                    text-decoration: none;
                    font-size: 20px;
                }

                #menu li a:hover {
                    text-decoration: underline;
                }


                /* Wrapper */

                #wrapper {
                }

                /* Page */

                #page {
                    width: 960px;
                    margin: 0 auto;
                    padding: 20px 5px;
                    background: #FFFFFF;
                }

                #page-bg {
                }

                /* Latest Post */

                #latest-post {
                    padding: 20px;
                    border: 1px solid #E7E7E7;
                }

                /* Content */

                #content {
                    float: left;
                    width: 700px;
                }

                .post {
                    padding-bottom: 15px;
                }

                .post h1 {
                    font-weight: normal;
                }

                .title {
                    height: 30px;
                    margin-left: 10px;
                    padding: 8px 0 0 20px;
                }

                .title a {
                    border-bottom: none;
                    color: #FFFFFF;
                }

                .title a:hover {
                    border-bottom: 1px dotted #000000;
                }

                .byline {
                    margin: -60px 20px 20px 20px;
                }

                .byline a {
                    color: #DC8700;
                }

                .tag {
                    padding: 0 15px;
                }

                .entry {
                    padding: 0 20px;
                }

                .entry p {
                    line-height: 200%;
                }

                .links {
                    padding: 4px 0px;
                    text-align: right;
                    font-weight: bold;
                }

                .links a {
                    border: none;
                }

                .links a:hover {
                }

                /* Sidebars */

                #sidebar1 {
                    float: left;
                    margin-top: -81px;
                    margin-left: -1px;
                }

                #sidebar2 {
                    float: right;
                }

                .sidebar {
                    float: left;
                    width: 240px;
                    padding: 0;
                    font-size: 12px;
                }

                .sidebar ul {
                    margin: 0;
                    padding: 0;
                    list-style: none;
                }

                .sidebar li {
                    padding: 0 0 20px 0;
                }

                .sidebar span {
                    cursor: pointer;
                }

                .sidebar li ul {
                }

                .sidebar li li {
                    margin: 0 10px 0 10px;
                    padding: 3px 0px;
                }


                .sidebar li h2 {
                    height: 40px;
                    margin: 0 0 0 0;
                    padding: 20px 15px 0px 65px;
                    background: url(../images/img04.jpg) no-repeat left top;
                    letter-spacing: -1px;
                    font-size: 16px;
                    font-weight: normal;
                    color: #FFFFFF;
                }

                .sidebar a {
                }

                .sidebar a:hover {
                    text-decoration: underline;
                }

                .sidebar a.ui-menuitem-link:hover {
                    text-decoration: none;
                }

                /* Search */

                #searchform {
                    margin: 0;
                    padding: 0 0 0 0;
                }

                #searchform br {
                    display: none;
                }

                #searchform h2 {
                }

                #s {
                    margin: 10px 0px 0 15px;
                    padding: 2px 2px;
                    width: 180px;
                    height: 18px;
                    border: 1px solid #6F6E6E;
                    background: #FFFFFF;
                    font-size: 10px;
                    color: #000000;
                }

                #x {
                    margin: 0;
                    padding: 2px 5px;
                    height: 25px;
                    background: #CA8186;
                    text-decoration: none;
                    text-transform: uppercase;
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 10px;
                    color: #CCCCCC;
                }
                /* Calendar */

                #calendar_wrap {
                    padding: 0 15px;
                    text-align: center;
                }

                #calendar_wrap table {
                    width: 100%;
                }

                #calendar_wrap th {
                }

                #calendar_wrap td {
                }

                #calendar_wrap tfoot td {
                    border: none;
                }

                #calendar_wrap tfoot td#prev {
                    text-align: left;
                    font-weight: bold;
                    border: none;
                }

                #calendar_wrap tfoot td#prev a {
                    border: none;
                }

                #calendar_wrap tfoot td#next {
                    text-align: right;
                    font-weight: bold;
                    border: none;
                }

                #calendar_wrap tfoot td#next a {
                    border: none;
                }

                /* Footer */

                #footer {
                    width: 960px;
                    height: 70px;
                    margin: 0 auto;
                    padding: 0 20px;
                }

                #footer p {
                    margin: 0;
                    padding: 25px 0 0 0;
                    text-align: center;
                    font-size: smaller;
                }

                #footer a {
                }

                #footer .link {
                    float: right;
                }

                #footer .copyright {
                    float: left;
                }

                .homeText {
                    line-height: 175%;
                }

                .homeMenu {
                    width:200px;
                    float:left;
                    margin-right:10px
                }

                .new {
                    color: #FF9900 !important;
                    font-weight: bold;
                    display:block;
                }

                .ui-widget {
                    font-size: 98% !important;
                }

                .ui-growl {
                    top:115px !important;
                }

                .themeMenu {
                    overflow: auto;
                    height:300px;
                    width:200px;
                }

                .sidebar .wijmo-wijmenu a {
                    text-decoration: none !important;
                }

                .dp-xml {
                    width:1000px;
                }
            </style>
            <style type="text/css">
                .ui-layout-north {
                    z-index:20 !important;
                    overflow:visible !important;;
                }

                .ui-layout-north .ui-layout-unit-content {
                    overflow:visible !important;
                }
            </style>

        </h:head>

        <h:body >		
            <!-- :applyStyle BEGIN-->
            <ds:applyStyle jquery="false" jquery-ui="true" />
            <!-- :applyStyle END-->
            <script>
                jQuery(document).ready(function(){jsf.ajax.addOnEvent(callbackIfSuccess);});
            </script>
            <c:set var="contentAreaId" value=":#{cc.clientId}:contentArea"/>


            <p:layout fullPage="true" >

                <p:layoutUnit id="top" position="north" size="80">

                    <ui:include src="internal/topbar-prime.xhtml">
                        <ui:param name="desktop" value="#{desktopBean}"/>
                        <ui:param name="preferencesInclude" value="#{cc.attrs.preferencesInclude}"/>
                    </ui:include>

                    <p:menubar autoSubmenuDisplay="true">
                        <p:submenu label="File" icon="ui-icon ui-icon-document">
                            <p:submenu label="New" icon="ui-icon ui-icon-contact">
                                <p:menuitem value="Project" url="#" helpText="CTRL+N" />
                                <p:menuitem value="Other" url="#" helpText="CTRL+O"/>
                            </p:submenu>
                            <p:menuitem value="Open" url="#" />
                            <p:menuitem value="Quit" url="#" />
                        </p:submenu>

                        <p:submenu label="Edit" icon="ui-icon ui-icon-pencil">
                            <p:menuitem value="Undo" url="#" icon="ui-icon ui-icon-arrowreturnthick-1-w" helpText="CTRL+Z"></p:menuitem>
                            <p:menuitem value="Redo" url="#" icon="ui-icon ui-icon-arrowreturnthick-1-e" helpText="CTRL+Y"></p:menuitem>
                        </p:submenu>

                        <p:submenu label="Help" icon="ui-icon ui-icon-help">
                            <p:menuitem value="Contents" url="#" />
                            <p:submenu label="Search" icon="ui-icon ui-icon-search">
                                <p:submenu label="Text">
                                    <p:menuitem value="Workspace" url="#" />
                                </p:submenu>
                                <p:menuitem value="File" url="#" />
                            </p:submenu>
                        </p:submenu>
                    </p:menubar>
                </p:layoutUnit>

                <p:layoutUnit id="bottom" position="south" size="60">
                    <h:outputLink value="http://code.google.com/p/primefaces/source/browse/examples/trunk/showcase/src/main/webapp/ui/layoutComplex.xhtml">
                        View Page Source (layoutComplex.xhtml)
                    </h:outputLink>

                    <br />

                    <h:outputLink value="http://code.google.com/p/primefaces/source/browse/examples/trunk/showcase/src/main/java/org/primefaces/examples/view/LayoutBean.java">
                        View Backing Bean Source (LayoutBean.java)
                    </h:outputLink>
                </p:layoutUnit>

                <p:layoutUnit id="left" position="west" size="300" resizable="true" closable="true" collapsible="true" header="Options" minSize="200">
                    <h:form>
                        <ui:include src="internal/menu-prime.xhtml">
                            <ui:param name="desktop" value="#{desktopBean}"/>
                        </ui:include>
                    </h:form>
                </p:layoutUnit>

                <p:layoutUnit id="right" position="east" size="250" header="Gallery" resizable="true" closable="true" collapsible="true"
                              style="text-align:center">


                    <p:lightBox transition="fade" style="text-align:center;margin-top:20px;">
                        <h:outputLink value="#{request.contextPath}/images/nature1.jpg" title="Nature 1" style="margin-bottom:5px;">
                            <h:graphicImage value="/images/nature1_small.jpg"/>
                        </h:outputLink>

                        <h:outputLink value="#{request.contextPath}/images/nature2.jpg" title="Nature 2" style="margin-bottom:2px;">
                            <h:graphicImage value="/images/nature2_small.jpg"/>
                        </h:outputLink>

                        <h:outputLink value="#{request.contextPath}/images/nature3.jpg" title="Nature 3" style="margin-bottom:2px;">
                            <h:graphicImage value="/images/nature3_small.jpg"/>
                        </h:outputLink>

                        <h:outputLink value="#{request.contextPath}/images/nature4.jpg" title="Nature 4" style="margin-bottom:2px;">
                            <h:graphicImage value="/images/nature4_small.jpg"/>
                        </h:outputLink>
                    </p:lightBox>

                    <p:commandButton id="basic" value="Show Dialog" onclick="dlg1.show();" type="button" style="margin-top:10px"/>

                </p:layoutUnit>

                <p:layoutUnit id="center" position="center">
                    <h:panelGroup id="contentArea" styleClass="ui-layout-content ui-widget-content"  layout="block">
                        <ui:include src="#{desktopBean.pageSrc}">
                            <ui:param name="contentAreaId" value="#{contentAreaId}"/>
                            <ui:param name="contentAreaUrl" value="#{desktopBean.pageSrc}"/>
                            <c:forEach items="#{desktopBean.menuItem.parameterNames}" var="parameterName">
                                <ui:param name="#{parameterName}" value="#{desktopBean.menuItem.getParameter(parameterName)}"/>
                            </c:forEach>
                        </ui:include>
                    </h:panelGroup>


                </p:layoutUnit>

            </p:layout>

            <p:dialog header="Basic Dialog" widgetVar="dlg1" modal="true">
                <h:outputText value="Resistance to PrimeFaces is futile!" />
            </p:dialog>


            <ui:debug hotkey="z" rendered="true"/>            
        </h:body>

    </composite:implementation>
</ui:composition> 
